import {
    transformToFormData,
    transformToSubmitData,
} from '@/pages/personnelEntry/components/AddPerson';
import { modify_params_keys } from '@/pages/personnelEntry/components/ModifyPerson';
import { editUser, fetchUserDetail } from '@/service/personnelEntry';
import ProForm from '@ant-design/pro-form';
import { useRequest, useMount } from 'ahooks';
import { Row, Col, message, Spin } from 'antd';
import { pickBy } from 'lodash';
import { useLocation } from 'umi';
import Avatar from '../Avatar';
import UserInfo from '../UserInfo/index';
import styles from './index.scss';

export default function Header(props: any) {
    const userId = props.match.params.id;
    const [form] = ProForm.useForm();
    const location = useLocation();

    const { loading, run: onFinishHandler } = useRequest(
        async (rawValues: any) => {
            const values = transformToSubmitData([rawValues]).map(
                (item: any) => {
                    return {
                        ...pickBy(item, (val, key) =>
                            modify_params_keys.includes(key),
                        ),
                        user_id: item.id,
                    };
                },
            );

            const res = await editUser(values[0]);

            if (res.code !== 200) {
                message.error(res.msg);
                return;
            }

            message.success('修改成功');
        },
    );

    const {
        loading: loadingByDetailInfo,
        run: loadUserDetailInfo,
        data,
    } = useRequest(async (id: string) => {
        const res = await fetchUserDetail(id);
        if (res.code !== 200) {
            message.error(res.msg || '服务器发生错误');
            return;
        }

        const data = transformToFormData([res.data]).reduce(
            (result: any, item: any, index: number) => {
                result[index] = item;
                return result;
            },
            {},
        )[0];

        form.setFieldsValue({ ...data });
        return res.data;
    });

    useMount(() => {
        // @ts-ignore
        if (!userId) {
            return;
        }
        // @ts-ignore
        loadUserDetailInfo(userId);
    });

    return (
        <Spin spinning={loading || loadingByDetailInfo || loadingByDetailInfo}>
            <Row className={styles.root} justify="space-between">
                <Col className={styles.description} flex="0 0 285px">
                    <div className={styles.avatar}>
                        <Avatar
                            avatar={data?.avatar}
                            name={data?.username}
                            address={data?.address}
                        />
                    </div>
                </Col>

                <Col className={styles.modifyArea} flex="1 1">
                    <div className={styles.userInfo}>
                        <div className={styles.title}>修改用户基本信息</div>
                        <UserInfo form={form} onFinish={onFinishHandler} />
                    </div>
                </Col>
            </Row>
        </Spin>
    );
}
